import Vue from "vue";
import App from "./App.vue";
// 1、引入Vuex
import Vuex from "vuex";
// 2、让 Vue 使用 vuex
Vue.use(Vuex);
// 3、创建仓库实例
const store = new Vuex.Store({
  state: {
    goodList: [
      {
        name: "诸葛亮",
        price: 1000,
        num: 1,
        checked: false,
      },
      {
        name: "蔡文姬",
        price: 1500,
        num: 1,
        checked: false,
      },
      {
        name: "妲己",
        price: 2000,
        num: 1,
        checked: false,
      },
      {
        name: "鲁班",
        price: 2200,
        num: 1,
        checked: false,
      },
    ],
  },

  getters: {
    AllPrice(state) {
      return state.goodList.reduce((prev, item) => {
        if (item.checked) {
          prev += item.price * item.num;
        }
        return prev;
      }, 0);
    },
  },
  mutations: {
    add(state, payload) {
      state.goodList[payload].num++;
    },
    red(state, payload) {
      state.goodList[payload].num > 1 && state.goodList[payload].num--;
    },
    del(state, payload) {
      state.goodList.splice(payload, 1);
    },
    addFn(state, payload) {
      // console.log(payload);
      state.goodList.push({ ...payload, checked: false });
    },
  },
  // actions: {
  //   asyncAddCount({ commit }, payload) {
  //     // console.log('asyncAddCount触发了');
  //     setTimeout(() => {
  //       commit("CHANG_MSG", payload);
  //     }, 1000);
  //   },
  // },
});
Vue.config.productionTip = false;
// 4、让仓库实例和vue实例关联起来
new Vue({
  store,
  render: (h) => h(App),
}).$mount("#app");
